/*
 * @Description: 全宗表格组件
 * @Author: Rfan
 * @Date: 2022-01-07 15:20:55
 * @LastEditTime: 2022-01-13 16:35:32
 */

import * as React from 'react';
import classNames from 'classnames/bind';
import { Button, Modal, Space, Table } from 'antd';
import { useFileContext } from '../contexts/FilesContext';
import styles from './list.module.scss';
import { displayTitle, showKeysList } from '@/utils/list';

const cx = classNames.bind(styles);

const { Column } = Table;

const List = () => {
  const { listArr, metadataList, fetchData } = useFileContext();
  console.log('list', listArr);
  // 删除类型
  const delItem = (id) => {
    console.log('del', id);
    Modal.confirm({
      title: '删除',
      content: '确认删除该档案类型？',
      onOk() {},
      onCancel() {
        console.log('Cancel');
      }
    });
  };

  const addSubTable = (code) => {
    console.log('add sub: ', code);
    fetchData(code);
  };

  return (
    <div className={cx('list-wrap')}>
      {listArr.map((item, idx) => {
        const { list, loading } = item;
        return (
          <Table
            key={idx}
            className={cx({ single: listArr.length % 2 === 1 && idx === 0 })}
            dataSource={list}
            loading={loading}
          >
            {/* <Column title={displayTitle('id', metadataList)} dataIndex="id" key="id" align="center" />
            <Column title="code" dataIndex="fondCode" key="fondCode" align="center" />
            <Column title="name" dataIndex="fondName" key="fondName" align="center" /> */}
            {showKeysList(list[0], metadataList).map((key) => (
              <Column
                title={displayTitle(key, metadataList)}
                dataIndex={key}
                key={key}
                align="center"
              />
            ))}
            <Column
              title="Action"
              key="action"
              align="center"
              render={(text, record) => (
                <Space size="middle">
                  <Button type="text" onClick={() => addSubTable(record.id)}>
                    查看下级
                  </Button>
                  <Button
                    type="text"
                    danger
                    disabled
                    onClick={() => {
                      delItem(record.id);
                    }}
                  >
                    删除
                  </Button>
                </Space>
              )}
            />
          </Table>
        );
      })}
    </div>
  );
};

export default List;
